<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			body{
				background: cadetblue;
			}
			.sun{
				position: relative;
				margin-top: 150px;
				margin-left: 150px;
				width: 50px;
				height: 50px;
				border-radius: 50%;
				background: white;
				box-shadow: 0px 0px 15px #fff;
				animation: sun 2s infinite;
				
			}
			.sun:after,.sun:before{
			 	content: "";
				width: 50px;
				height: 50px;
				background:white;
				display: block;
				border-radius: 50%;
				position: absolute;
				left: 0px;
				top: 0px;
				box-shadow: 0px 0px 15px #fff;
			}
			.sun::after{
				opacity: 0;
				transform: scale(2);
				animation: sunafter 2s infinite;	
			}
			.sun:before{
				transform: scale(1.5);
				opacity: 0;
				animation:  sunbefor 2s infinite;
			}
			.wave{
				position: absolute;
				bottom: 0;
				left: 0;
				width: 100%;
				height: 211px;
				background: url(images/1.png)no-repeat;
				animation: wave 2s infinite;
				
			}@keyframes sunbefor{
				100%{
					transform: scale(1.8);
					opacity: 0.5;
					
				}
			}
			@keyframes sunafter{
				100%{
					transform: scale(2);
					opacity: 0.5;
				}
			}
			@keyframes wave{
				0%{}
				50%{
					background-position: 0px 30px;
					bottom: 10px;
				}
				100%{
					background-position: 0px 0px;
					bottom: 0px;
				}
			}
			@keyframes sun{
				0%{
					
				}
				50%{
					/*width: 80px;
					height: 80px;*/
					/*transform: scale(1.2);*/
					box-shadow: 0px 0px 30px #fff;
				}
				100%{
					width: 50px;
					height: 50px;
					box-shadow: 0px 0px 15px #fff;
				}
			}
		</style>
	</head>
	<body>
		<div class="sun">
			
		</div>
		<div class="wave">
			<img src="images/2.png"/>
		</div>
	</body>
</html>
